#container {

  position: relative;

  width: 100%;

  display: inline-block;

}

#cards-container {
  margin: 10px;
  display: inline-block;
}

.container {
  width: 100%;
  height: 25pc;
}

.name-container {
  z-index:2;
  position:absolute;
  color:white;
  background:black;
  font-size:20px;
  font-weight:650;
  text-decoration:none;
  padding:20px;
  top:85%;
  width:50%;
  padding:5px;
  transition:0.4s;
}

.name {

  font-size: 13px;

  color: #f2f3f4;

}

.texts {
  margin: 20px;
}

.icon {
  display: none;
  width: 100px;
  position: absolute;
  left: 35%;
  top: 40%;
  box-shadow: 7px 7px black;
}

.Form {

  float: left;
  margin: 20px;
  position: relative;
  width: 30%;
  box-shadow: 5px 4px 4px #595959;
  position: relative;
  border-radius: 5px;
  transition: 0.3s ease-in-out;

}

.Form:hover {
  box-shadow: 8px 7px 7px #595959;
}
.Form:hover .name-container{
background:#0000cc;
}
.button {
  border-radius: 5px;
  background: none;
  width:100%;
}

.imgs {
  border-radius: 5px;
  width:100%;
  height:100%;
  object-fit:cover;
}

#title {
  margin: 10px;
text-align: center;
}

.main {
  margin: 0px;
  color: #0000cc;
  font-size: 38px;
text-indent: -150px;
font-weight: 650;
}

.side {
  margin: 0px;
  color: black;
  font-size: 30px;
  font-weight: 650;
}

@media screen and (max-width:950px) {

  .Form {
    width:100%;
    margin-left:0px;
    margin-bottom:5px;
    display:inline-block;
    margin:25px 0px 25px 0px;
  }
  #cards-container{
    margin:0px;
  }
  .container {
    height: 25pc;
  }
  .name-container{
    width: 100%;
    top:90%;
  }
}